<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽式建站平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f6f7;
            color: #18191c;
            line-height: 1.5;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        
        .header {
            background: #fff;
            padding: 16px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e3e5e7;
        }
        
        .logo {
            font-size: 20px;
            font-weight: 500;
            color: #18191c;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
            color: #3498db;
        }
        
        .user-menu {
            display: flex;
            align-items: center;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 12px;
            cursor: pointer;
        }
        
        .main-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        .sidebar {
            width: 280px;
            background: #fff;
            border-right: 1px solid #e3e5e7;
            padding: 16px;
            overflow-y: auto;
        }
        
        .sidebar-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 16px;
            color: #18191c;
            display: flex;
            align-items: center;
        }
        
        .sidebar-title i {
            margin-right: 8px;
            color: #3498db;
        }
        
        .components-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .component-item {
            background: #f5f7fa;
            border-radius: 4px;
            padding: 12px;
            text-align: center;
            cursor: grab;
            transition: all 0.3s ease;
        }
        
        .component-item:hover {
            background: #e8f4ff;
            transform: translateY(-2px);
        }
        
        .component-item i {
            font-size: 24px;
            color: #3498db;
            margin-bottom: 8px;
        }
        
        .component-item .label {
            font-size: 13px;
            color: #61666d;
        }
        
        .canvas-area {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: #f5f6f7;
        }
        
        .canvas-container {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            min-height: 600px;
            padding: 20px;
            position: relative;
        }
        
        .canvas-placeholder {
            text-align: center;
            color: #9499a0;
            padding: 40px;
        }
        
        .canvas-placeholder i {
            font-size: 48px;
            margin-bottom: 16px;
            color: #d1d5db;
        }
        
        .property-panel {
            width: 320px;
            background: #fff;
            border-left: 1px solid #e3e5e7;
            padding: 16px;
            overflow-y: auto;
        }
        
        .property-section {
            margin-bottom: 20px;
        }
        
        .property-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 12px;
            color: #18191c;
            display: flex;
            align-items: center;
        }
        
        .property-title i {
            margin-right: 8px;
            color: #3498db;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        .form-label {
            display: block;
            font-size: 13px;
            color: #61666d;
            margin-bottom: 4px;
        }
        
        .form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e3e5e7;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #3498db;
        }
        
        .form-select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e3e5e7;
            border-radius: 4px;
            font-size: 14px;
            background: white;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #3498db;
            color: white;
        }
        
        .btn-primary:hover {
            background: #2980b9;
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid #e3e5e7;
            color: #61666d;
        }
        
        .btn-outline:hover {
            background: #f5f7fa;
        }
        
        .block-item {
            background: #f5f7fa;
            border: 1px dashed #d1d5db;
            border-radius: 4px;
            padding: 16px;
            margin-bottom: 16px;
            cursor: move;
        }
        
        .block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e3e5e7;
        }
        
        .block-title {
            font-size: 15px;
            font-weight: 500;
            color: #18191c;
            display: flex;
            align-items: center;
        }
        
        .block-title i {
            margin-right: 8px;
            color: #3498db;
        }
        
        .block-actions {
            display: flex;
        }
        
        .block-action {
            margin-left: 8px;
            cursor: pointer;
            color: #9499a0;
        }
        
        .block-action:hover {
            color: #3498db;
        }
        
        .block-content {
            min-height: 100px;
        }
        
        .nav-block .block-content {
            display: flex;
            justify-content: space-between;
            padding: 8px;
            background: #e8f4ff;
        }
        
        .hero-block .block-content {
            text-align: center;
            padding: 40px 20px;
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: white;
            border-radius: 4px;
        }
        
        .footer {
            text-align: center;
            padding: 16px;
            color: #9499a0;
            font-size: 13px;
            border-top: 1px solid #e3e5e7;
            margin-top: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <i class="fas fa-puzzle-piece"></i>
            拖拽式建站平台
        </div>
        <div class="user-menu">
            <span>欢迎，用户123</span>
            <div class="user-avatar">
                <i class="fas fa-user"></i>
            </div>
        </div>
    </div>
    
    <div class="main-container">
        <div class="sidebar">
            <div class="sidebar-title">
                <i class="fas fa-th-large"></i>
                组件库
            </div>
            
            <div class="components-grid">
                <div class="component-item" draggable="true" data-type="navbar">
                    <i class="fas fa-bars"></i>
                    <div class="label">导航栏</div>
                </div>
                
                <div class="component-item" draggable="true" data-type="hero">
                    <i class="fas fa-star"></i>
                    <div class="label">Hero区块</div>
                </div>
                
                <div class="component-item" draggable="true" data-type="feature">
                    <i class="fas fa-gem"></i>
                    <div class="label">Feature区块</div>
                </div>
                
                <div class="component-item" draggable="true" data-type="content">
                    <i class="fas fa-align-left"></i>
                    <div class="label">图文区块</div>
                </div>
                
                <div class="component-item" draggable="true" data-type="product">
                    <i class="fas fa-box"></i>
                    <div class="label">产品区块</div>
                </div>
                
                <div class="component-item" draggable="true" data-type="faq">
                    <i class="fas fa-question-circle"></i>
                    <div class="label">FAQ区块</div>
                </div>
                
                <div class="component-item" draggable="true" data-type="article-list">
                    <i class="fas fa-newspaper"></i>
                    <div class="label">文章列表</div>
                </div>
                
                <div class="component-item" draggable="true" data-type="footer">
                    <i class="fas fa-window-minimize"></i>
                    <div class="label">Footer区块</div>
                </div>
            </div>
            
            <div class="sidebar-title" style="margin-top: 24px;">
                <i class="fas fa-layer-group"></i>
                页面管理
            </div>
            
            <div class="form-group">
                <button class="btn btn-primary" style="width: 100%;">
                    <i class="fas fa-plus"></i> 新建页面
                </button>
            </div>
            
            <div class="form-group">
                <div class="form-label">当前页面</div>
                <select class="form-select">
                    <option>首页</option>
                    <option>关于我们</option>
                    <option>产品服务</option>
                    <option>联系我们</option>
                </select>
            </div>
            
            <div class="form-group">
                <div class="form-label">页面设置</div>
                <input type="text" class="form-input" placeholder="页面标题" value="首页">
                <input type="text" class="form-input" style="margin-top: 8px;" placeholder="页面描述">
                <input type="text" class="form-input" style="margin-top: 8px;" placeholder="页面路径" value="/index">
            </div>
            
            <div class="form-group">
                <button class="btn btn-outline" style="width: 100%;">
                    <i class="fas fa-save"></i> 保存页面
                </button>
            </div>
        </div>
        
        <div class="canvas-area">
            <div class="canvas-container">
                <div class="block-item nav-block">
                    <div class="block-header">
                        <div class="block-title">
                            <i class="fas fa-bars"></i>
                            导航栏区块
                        </div>
                        <div class="block-actions">
                            <div class="block-action"><i class="fas fa-cog"></i></div>
                            <div class="block-action"><i class="fas fa-trash"></i></div>
                        </div>
                    </div>
                    <div class="block-content">
                        <div style="font-weight: 500;">网站名称</div>
                        <div>
                            <span style="margin: 0 10px;">首页</span>
                            <span style="margin: 0 10px;">产品</span>
                            <span style="margin: 0 10px;">关于</span>
                            <span style="margin: 0 10px;">联系</span>
                        </div>
                    </div>
                </div>
                
                <div class="block-item hero-block">
                    <div class="block-header">
                        <div class="block-title">
                            <i class="fas fa-star"></i>
                            Hero区块
                        </div>
                        <div class="block-actions">
                            <div class="block-action"><i class="fas fa-cog"></i></div>
                            <div class="block-action"><i class="fas fa-trash"></i></div>
                        </div>
                    </div>
                    <div class="block-content">
                        <h2>欢迎来到我们的网站</h2>
                        <p>这是一个简洁而强大的Hero区域，可以吸引用户的注意力</p>
                        <button class="btn btn-primary" style="margin-top: 16px;">了解更多</button>
                    </div>
                </div>
                
                <div class="block-item">
                    <div class="block-header">
                        <div class="block-title">
                            <i class="fas fa-gem"></i>
                            Feature区块
                        </div>
                        <div class="block-actions">
                            <div class="block-action"><i class="fas fa-cog"></i></div>
                            <div class="block-action"><i class="fas fa-trash"></i></div>
                        </div>
                    </div>
                    <div class="block-content">
                        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
                            <div style="text-align: center;">
                                <i class="fas fa-lightning-bolt" style="font-size: 24px; color: #3498db;"></i>
                                <h3>功能特性一</h3>
                                <p>描述功能特性的详细内容</p>
                            </div>
                            <div style="text-align: center;">
                                <i class="fas fa-shield-alt" style="font-size: 24px; color: #3498db;"></i>
                                <h3>功能特性二</h3>
                                <p>描述功能特性的详细内容</p>
                            </div>
                            <div style="text-align: center;">
                                <i class="fas fa-rocket" style="font-size: 24px; color: #3498db;"></i>
                                <h3>功能特性三</h3>
                                <p>描述功能特性的详细内容</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="property-panel">
            <div class="property-section">
                <div class="property-title">
                    <i class="fas fa-cube"></i>
                    区块属性
                </div>
                
                <div class="form-group">
                    <div class="form-label">区块类型</div>
                    <div style="padding: 8px 12px; background: #f5f7fa; border-radius: 4px;">
                        Hero区块
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="form-label">标题</div>
                    <input type="text" class="form-input" value="欢迎来到我们的网站">
                </div>
                
                <div class="form-group">
                    <div class="form-label">描述文本</div>
                    <textarea class="form-input" rows="3">这是一个简洁而强大的Hero区域，可以吸引用户的注意力</textarea>
                </div>
                
                <div class="form-group">
                    <div class="form-label">按钮文字</div>
                    <input type="text" class="form-input" value="了解更多">
                </div>
                
                <div class="form-group">
                    <div class="form-label">背景颜色</div>
                    <div style="display: flex;">
                        <input type="text" class="form-input" value="linear-gradient(135deg, #3498db, #2c3e50)" style="flex: 1;">
                        <button class="btn btn-outline" style="margin-left: 8px;">
                            <i class="fas fa-palette"></i>
                        </button>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="form-label">文字颜色</div>
                    <select class="form-select">
                        <option>白色</option>
                        <option>黑色</option>
                        <option>蓝色</option>
                    </select>
                </div>
            </div>
            
            <div class="property-section">
                <div class="property-title">
                    <i class="fas fa-sliders-h"></i>
                    样式设置
                </div>
                
                <div class="form-group">
                    <div class="form-label">内边距</div>
                    <input type="text" class="form-input" value="40px 20px">
                </div>
                
                <div class="form-group">
                    <div class="form-label">外边距</div>
                    <input type="text" class="form-input" value="0 0 20px 0">
                </div>
                
                <div class="form-group">
                    <div class="form-label">对齐方式</div>
                    <select class="form-select">
                        <option>居中</option>
                        <option>左对齐</option>
                        <option>右对齐</option>
                    </select>
                </div>
            </div>
            
            <div class="property-section">
                <div class="property-title">
                    <i class="fas fa-link"></i>
                    链接设置
                </div>
                
                <div class="form-group">
                    <div class="form-label">按钮链接</div>
                    <input type="text" class="form-input" value="/about">
                </div>
                
                <div class="form-group">
                    <div class="form-label">打开方式</div>
                    <select class="form-select">
                        <option>当前窗口</option>
                        <option>新窗口</option>
                    </select>
                </div>
            </div>
            
            <div class="form-group">
                <button class="btn btn-primary" style="width: 100%;">
                    <i class="fas fa-save"></i> 应用更改
                </button>
            </div>
            
            <div class="form-group">
                <button class="btn btn-outline" style="width: 100%;">
                    <i class="fas fa-copy"></i> 复制区块
                </button>
            </div>
            
            <div class="form-group">
                <button class="btn btn-outline" style="width: 100%; color: #e74c3c;">
                    <i class="fas fa-trash"></i> 删除区块
                </button>
            </div>
        </div>
    </div>
    
    <div class="footer">
        © 2023 拖拽式建站平台 | 让网站建设变得简单
    </div>

    <script>
        // 简单的拖拽功能示例
        document.addEventListener('DOMContentLoaded', function() {
            const componentItems = document.querySelectorAll('.component-item');
            const canvasContainer = document.querySelector('.canvas-container');
            
            componentItems.forEach(item => {
                item.addEventListener('dragstart', function(e) {
                    e.dataTransfer.setData('text/plain', e.target.dataset.type);
                });
            });
            
            canvasContainer.addEventListener('dragover', function(e) {
                e.preventDefault();
            });
            
            canvasContainer.addEventListener('drop', function(e) {
                e.preventDefault();
                const type = e.dataTransfer.getData('text/plain');
                
                // 创建新区块
                const newBlock = document.createElement('div');
                newBlock.className = 'block-item';
                newBlock.innerHTML = `
                    <div class="block-header">
                        <div class="block-title">
                            <i class="fas fa-cube"></i>
                            ${getComponentName(type)}区块
                        </div>
                        <div class="block-actions">
                            <div class="block-action"><i class="fas fa-cog"></i></div>
                            <div class="block-action"><i class="fas fa-trash"></i></div>
                        </div>
                    </div>
                    <div class="block-content">
                        ${getComponentContent(type)}
                    </div>
                `;
                
                // 添加到画布
                canvasContainer.appendChild(newBlock);
                
                // 添加删除功能
                const deleteBtn = newBlock.querySelector('.fa-trash').closest('.block-action');
                deleteBtn.addEventListener('click', function() {
                    newBlock.remove();
                });
            });
            
            function getComponentName(type) {
                const names = {
                    'navbar': '导航栏',
                    'hero': 'Hero',
                    'feature': 'Feature',
                    'content': '图文',
                    'product': '产品',
                    'faq': 'FAQ',
                    'article-list': '文章列表',
                    'footer': 'Footer'
                };
                return names[type] || '未知';
            }
            
            function getComponentContent(type) {
                const contents = {
                    'navbar': '<div style="display: flex; justify-content: space-between; padding: 8px; background: #e8f4ff;"><div style="font-weight: 500;">网站名称</div><div>导航菜单</div></div>',
                    'hero': '<h2>新Hero区域标题</h2><p>这里是Hero区域的描述内容</p><button class="btn btn-primary" style="margin-top: 16px;">行动按钮</button>',
                    'feature': '<div style="text-align: center;"><i class="fas fa-cube" style="font-size: 24px; color: #3498db;"></i><h3>功能标题</h3><p>功能描述内容</p></div>',
                    'content': '<div style="display: flex;"><div style="flex: 1;">文本内容区域</div><div style="flex: 1;">图片区域</div></div>',
                    'product': '<div style="text-align: center; border: 1px solid #e3e5e7; padding: 16px; border-radius: 4px;"><h3>产品名称</h3><p>产品描述</p><button class="btn btn-outline">查看详情</button></div>',
                    'faq': '<div><h4>常见问题</h4><p>问题描述</p></div>',
                    'article-list': '<div style="border-bottom: 1px solid #e3e5e7; padding: 12px 0;"><h4>文章标题</h4><p>文章摘要内容</p></div>',
                    'footer': '<div style="text-align: center; padding: 20px; background: #f5f7fa;">Footer内容区域</div>'
                };
                return contents[type] || '<p>新添加的区块内容</p>';
            }
            
            // 为现有删除按钮添加功能
            document.querySelectorAll('.block-action .fa-trash').forEach(btn => {
                btn.addEventListener('click', function() {
                    this.closest('.block-item').remove();
                });
            });
        });
    </script>
</body>
</html>